<template>
  <div id="member-coupon-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
    paddingTop:(this.getSafeArea().top+40)+'px'
  }">
    <div class="page-title page-title-white" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberHome')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>我的优惠券</span>
    </div>

    <!--状态切换-->
    <div class="status-box" style="position:relative;" :style="{
      top:(this.getSafeArea().top+5)+'px'
    }">
      <div class="item">
      <div class="item" v-for="(item,index) in statusArr" :key="index" :class="{curr:currStatus===item.id}" @click="changeStatus(item.id)">
        <span v-text="item.name"></span>
      </div>
      </div>
    </div>

    <i-scroller-box class="coupon-list" ref="i-scroller-box"
                    url="Member/getCouponList"
                    :height="getWinSize().height-this.getSafeArea().top-120"
                    :style="{width:'100%'}">
      <template v-slot:list-item="{index,data}">
        <div class="item" :key="index">
          <div class="left">
            <div class="minus-price" v-text="'￥'+ToMoney(data.reduceMoney)"></div>
            <div class="full-price"  v-text="'满'+ToMoney(data.fullMoney)+'使用'"></div>
          </div>
          <div class="right">
            <div class="top-box">
              <div class="box1">
                <div class="validity-time" v-text="'有效期: '+data.endDay"></div>
                <div class="get-time"  v-text="'领取时间: '+data.getDay"></div>
              </div>
              <div class="box2">
                <el-button class="use-button" type="danger" v-if="data.status.id===1" @click="toUse(data)">立即使用</el-button>
                <!--已过期-->
                <div class="expired-icon" v-if="data.status.id===2"></div>
                <!--已使用-->
                <div class="used-icon" v-if="data.status.id===0"></div>
              </div>
            </div>
            <div class="use-shop" v-text="'限于: 【'+(data.shopName?data.shopName:'全平台')+'，'+(data.productClassifyName?data.productClassifyName:'全分类')+'】'"></div>
          </div>
          <div class="c"></div>
        </div>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import IScrollerBox from '../common/IScrollerBox'
export default {
  name: 'MemberCoupon',
  components: {IScrollerBox},
  data:function () {
    return {
      couponList:[],
      currStatus:-1,
      currLoading:false,
      statusArr:[
        {name:'全部',id:-1},
        {name:'未使用',id:1},
        {name:'已使用',id:0},
        {name:'已过期',id:2},
      ]
    }
  },
  mounted () {
    this.getCouponList();
  },
  methods:{
    toUse:function (item) {
      if (item.shopId){
        this.$router.push({
          name:"ShopHome",
          query:{
            id:item.shopId
          }
        })
      }else{
        this.$router.push({
          name:"SearchResult",
          query:{
            act:'getList'
          }
        })
      }
    },
    changeStatus:function (status) {
      if (this.currLoading){
        return
      }
      this.currStatus=status
      this.getCouponList();
    },
    // 获取-优惠券
    getCouponList: function () {
      let $this = this
      var form={
        pageSize:50
      }
      if ($this.currStatus!==-1){
        form.status=$this.currStatus
      }
      $this.$refs['i-scroller-box'].getList({form:form})
    },
  }
}
</script>

<style scoped>

</style>
